<template>
    <div class="con-p">
        <div class="send-p">
            <img class="send-audio" src="@/assets/img/weLiao/audio-btn.png" alt="">
            <input v-model.trim="content" @focus="hideMore" class="send-input" type="text">
            <div v-if="content" class="send-btn">发送</div>
            <img v-else @click="showMore" class="send-more" src="@/assets/img/weLiao/more-btn.png" alt="">
            
        </div>
        <div class="more-p" :class="{'show': isShow}">
            <div @click="selectImg" class="more-item">
                <img class="more-img" src="@/assets/img/weLiao/img-btn.png" alt="">
                <div class="more-text">图片</div>
            </div>
            <div @click="selectVideo" class="more-item">
                <img class="more-img" src="@/assets/img/weLiao/video-btn.png" alt="">
                <div class="more-text">视频</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            content: '',
            isShow: false
        }
    },
    methods: {
        showMore () {
            this.isShow = true
        },
        hideMore () {
            this.isShow = false
        },
        selectImg () {
            this.hideMore()
        },
        selectVideo () {
            this.hideMore()
        }
    }
}
</script>
<style scoped>
.con-p{
    position: fixed; left: 0; bottom: 0; width: 100%;
}
.send-p{
     height: 0.96rem; background: #F6F6F6;box-sizing: border-box;
    padding: 0.12rem 0.2rem; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); 
}
.send-audio{
    display: inline-block;vertical-align: middle; width: 0.52rem; height: 0.52rem;
}
.send-input{
    display: inline-block;vertical-align: middle; width: 4.8rem; height: 0.72rem; background: #fff;
    font-size: 0.32rem; box-sizing: border-box; padding: 0.2rem;  margin: 0 0.2rem;
}   
.send-more{
    display: inline-block;vertical-align: middle; width: 0.52rem; height: 0.52rem;
}
.send-btn{
    display: inline-block; vertical-align: middle;
    background: #128FEF;color: #fff; padding: 0.2rem;

}
.more-p{
    height: 0rem; border-top: #E5E5E5 solid 1px; background: #F8F8F8;
    text-align: center; transition: 0.5s;
}
.more-p.show{
    height: 2.32rem;
}
.more-item{
    display: inline-block; vertical-align: middle; margin:0.34rem 0.73rem 0 0.73rem;
}
.more-img{
    display: inline-block; width: 1.24rem; height: 1.24rem;
}
.more-text{
    font-size: 0.24rem; color: #888888;
}
</style>